﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Task list</title>
    <link href="../extjs/resources/css/ext-all-gray.css" rel="stylesheet" />
    <script src="../Scripts/ext-all.js"></script>
    <!--<script src="../Scripts/TaDMS/DefineStore.js"></script>-->
    <script src="../Scripts/TaDMS/DefineModel.js"></script>
</head>
<body>
    <script type="text/javascript">

        Ext.onReady(function () {

            //Ext.create('Ext.container.Viewport', {
            //    layout: 'border',
            //    items: [{
            //        region: 'north',
            //        height: 200,
            //        title: 'Search',
            //        collapsible: true,
            //        html: 'Search area'
            //    }, {
            //        region: 'center',
            //        title: 'Danh sách',
            //        html: 'grid'
            //    }]
            //});

            //storeTask.load({
            //    callback: function() {
            //        var data = storeTask.first();

            //        console.log("Total record: " + data.get('total'));
            //        console.log("Total success: " + data.get('success'));
            //    },
            //    param: {
            //        start: 0,
            //        limit: 1
            //    }
            //});

            //var storeTask = Ext.create('Ext.data.JsonStore', {
            //    totalProperty: 'total',
            //    root: 'data',
            //    url: '/api/ApiTask',
            //    fields: [{
            //        name: 'TaskId', type: 'int'
            //    }, {
            //        name: 'CreateBy', type: 'int'
            //    }, {
            //        name: 'TaskName', type: 'string'
            //    }, {
            //        name: 'TaskType', type: 'string'
            //    }, {
            //        name: 'StartDate', type: 'date'
            //    }, {
            //        name: 'EndDate', type: 'date'
            //    }, {
            //        name: 'ActualEndDate', type: 'date'
            //    }, {
            //        name: 'Status', type: 'int'
            //    }, {
            //        name: 'Description', type: 'int'
            //    }, {
            //        name: 'CreateDate', type: 'date'
            //    }]
            //});

            //storeTask.load({
            //    param: {
            //        start: 0, limit: 1
            //    }
            //});
            
            var storeTask = Ext.create('Ext.data.Store', {
                pageSize: 1,
                model: 'VTV.TaDMS.Extjs.Model.Task',
                proxy: {
                    type: 'ajax',
                    //url: '/api/ApiTask/Get',
                    api: {
                        create: '',
                        read: '/api/ApiTask/GetAll',
                        update: '/api/ApiTask/Update'
                    },
                    reader: {
                        root: 'data',
                        type: 'json',
                        totalProperty: 'total',
                        successProperty: 'success'
                    },
                    writer: {
                        type: 'json'
                    }
                },
                autoLoad: { param: { start: 0, limit: 1 } },
                autoSync: true,
                listeners: {
                    write: function (store, operation) {
                        var record = operation.getRecords()[0],
                            name = Ext.String.capitalize(operation.action),
                            verb;


                        if (name == 'Destroy') {
                            record = operation.records[0];
                            verb = 'Destroyed';
                        } else {
                            verb = name + 'd';
                        }
                        Ext.example.msg(name, Ext.String.format("{0} task: {1}", verb, record.getId()));

                    }
                }
            });

            var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
                listeners: {
                    cancelEdit: function (rowEditing, context) {
                        // Canceling editing of a locally added, unsaved record: remove it
                        if (context.record.phantom) {
                            store.remove(context.record);
                        }
                    }
                }
            });

            var grid = Ext.create('Ext.grid.Panel', {
                store: storeTask,
                plugins: [rowEditing],
                iconCls: 'icon-user',
                stripeRows: true,
                height: 250,
                title: 'Task Grid',
                columns: [{
                    text: 'TaskId', width: 50, sortable: true, dataIndex: 'TaskId'
                }, {
                    text: 'CreateBy', width: 150, sortable: true, dataIndex: 'CreateBy'
                }, {
                    text: 'TaskName', width: 250, sortable: true, dataIndex: 'TaskName', field: { xtype: 'textfield' }
                }, {
                    text: 'StartDate', width: 100, sortable: true, dataIndex: 'StartDate', renderer: Ext.util.Format.dateRenderer('d-m-Y'), field: { xtype: 'datefield' }
                }, {
                    text: 'Description', flex: 1, sortable: true, dataIndex: 'Descriptions', field: { xtype: 'textfield' }
                }],
                bbar: new Ext.PagingToolbar({
                    pageSize: 1,
                    store: storeTask,
                    displayInfo: true,
                    displayMsg: 'Displaying topics {0} - {1} of {2}',
                    emptyMsg: "No topics to display"
                }),
                renderTo: document.body
            });
        });

    </script>
</body>
</html>
